<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>文档模板使用指南 | ant-press | 基于antdocs的文档系统</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.5.2">
    
    <meta name="description" content="快速构建文档系统">
    <link rel="preload" href="/ant-press-docs/assets/css/0.styles.602a9976.css" as="style"><link rel="preload" href="/ant-press-docs/assets/js/app.ea788945.js" as="script"><link rel="preload" href="/ant-press-docs/assets/js/2.6c336191.js" as="script"><link rel="preload" href="/ant-press-docs/assets/js/4.2630cfbc.js" as="script"><link rel="prefetch" href="/ant-press-docs/assets/js/10.770631ee.js"><link rel="prefetch" href="/ant-press-docs/assets/js/11.1ec598cc.js"><link rel="prefetch" href="/ant-press-docs/assets/js/3.01a6421d.js"><link rel="prefetch" href="/ant-press-docs/assets/js/5.d98023a1.js"><link rel="prefetch" href="/ant-press-docs/assets/js/6.c3aa78e3.js"><link rel="prefetch" href="/ant-press-docs/assets/js/7.ca661ffb.js"><link rel="prefetch" href="/ant-press-docs/assets/js/8.c49a9c57.js"><link rel="prefetch" href="/ant-press-docs/assets/js/9.6a57cad2.js">
    <link rel="stylesheet" href="/ant-press-docs/assets/css/0.styles.602a9976.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/ant-press-docs/" class="router-link-active home-link"><img src="/ant-press-docs/logo.png" alt="ant-press | 基于antdocs的文档系统" class="logo"> <span class="site-name">ant-press | 基于antdocs的文档系统</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          快速入门与学习
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          脚手架
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <!----></nav></div></div> <!----></header> <aside class="sidebar"><!----> <!----></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h1 id="文档模板使用指南"><a href="#文档模板使用指南" class="header-anchor">#</a> 文档模板使用指南</h1> <blockquote><p>基于 ant-docs 设计，支持 ant-design-vue ui 库。</p></blockquote> <h2 id="前提"><a href="#前提" class="header-anchor">#</a> 前提</h2> <ul><li>安装 node.js</li> <li>安装 <code>npm</code>/<code>cnpm</code></li></ul> <h2 id="命令"><a href="#命令" class="header-anchor">#</a> 命令</h2> <blockquote><p>如果安装速度很慢，可以切换为淘宝源，命令如下：
<code>npm config set registry https://registry.npm.taobao.org</code></p></blockquote> <ul><li>安装</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span>

<span class="token comment"># or</span>

cnpm <span class="token function">install</span>
</code></pre></div><ul><li>运行</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> run dev
</code></pre></div><ul><li>打包</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> run build
</code></pre></div><ul><li>生成变更记录</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> run log
</code></pre></div><ul><li>提交代码</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> run commit
</code></pre></div><ul><li>预览打包后文件</li></ul> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> run preview
</code></pre></div><h2 id="目录结构说明"><a href="#目录结构说明" class="header-anchor">#</a> 目录结构说明</h2> <div class="language-text extra-class"><pre class="language-text"><code>|-- .vuepress 根配置
      |-- public
          |-- favicon.ico  // 标题栏使用icon,可替换
          |-- logo.png // 首页和其他页面用logo，可替换
      |-- styles
          |-- palette.less // 样式变量
          |-- style.less // 样式声明
      |-- config.js // 全局配置
      |-- enhanceApp.js // 组件库引入
|-- config // 导航与侧边栏配置
      |-- nav.js // 顶部导航栏配置
      |-- sidebar.js // 侧边栏配置
|-- css // 具体文档：css
|-- html // 具体文档:html
|-- README.md // 首页
|-- node_modules // npm 模块
|-- commitlint.config.js // git提交限制
|-- package.json // npm说明
|-- package-lock.json // npm说明
|-- docs 打包文件
</code></pre></div><h2 id="配置"><a href="#配置" class="header-anchor">#</a> 配置</h2> <h3 id="首页配置"><a href="#首页配置" class="header-anchor">#</a> 首页配置</h3> <blockquote><p>注意与常用项目的区别，根目录下的 README 表示的即是首页</p></blockquote> <p>首页采用<code>YAML front matter</code>书写，下载项目之后，运行起来,可对照查看。
<img src="/ant-press-docs/assets/img/index-config.2dad1905.jpg" alt="首页配置"></p> <h3 id="logo-和-icon-配置"><a href="#logo-和-icon-配置" class="header-anchor">#</a> logo 和 icon 配置</h3> <p>准备好图片，修改名称分别为<code>favicon.ico</code>和<code>logo.png</code>，替换<code>.vuepress\public</code>下文件即可。</p> <h3 id="顶部导航配置"><a href="#顶部导航配置" class="header-anchor">#</a> 顶部导航配置</h3> <blockquote><p>位置为<code>/config/nav.js</code></p></blockquote> <ol><li>名称解释:</li></ol> <ul><li>text: 名称</li> <li>link 名称显示的链接地址</li> <li>items 子项（如果有子导航地址）</li></ul> <ol start="2"><li>嵌套</li></ol> <p>如果有不断的子项，那么可以不断嵌套</p> <h3 id="侧边栏配置"><a href="#侧边栏配置" class="header-anchor">#</a> 侧边栏配置</h3> <blockquote><p>位置为<code>config/sidebar.js</code></p></blockquote> <p>当前文档系统为多页配置。即如以下配置，打开 html 链接，那么全部是 html 文件夹下的文件。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> sidebar <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token string">&quot;/html/&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 指向 /html/README.md</span>
    <span class="token string">&quot;one &quot;</span><span class="token punctuation">,</span> <span class="token comment">// 指向 /html/one.md</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">&quot;/css/&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 指向 /css/README.md</span>
    <span class="token string">&quot;one&quot;</span><span class="token punctuation">,</span> <span class="token comment">//  指向 /one/README.md</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>所有的页面默认以<code>#</code>一级标题作为侧边栏标题，如果要指定侧边栏标题，需要使用以下结构</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> sidebar <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token string">&quot;/html/&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">&quot;HTML介绍&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 名称</span>
      path<span class="token operator">:</span> <span class="token string">&quot;/html/&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 路径</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">&quot;第一篇文章&quot;</span><span class="token punctuation">,</span>
      path<span class="token operator">:</span> <span class="token string">&quot;one&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">&quot;/css/&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;one&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="其他"><a href="#其他" class="header-anchor">#</a> 其他</h2> <h3 id="基础路径配置"><a href="#基础路径配置" class="header-anchor">#</a> 基础路径配置</h3> <div class="language- extra-class"><pre class="language-text"><code>如果你想将你的网站部署到 https://foo.github.io/bar/，那么 base 应该被设置成 &quot;/bar/&quot;，它的值应当总是以斜杠开始，并以斜杠结束。

base 将会作为前缀自动地插入到所有以 / 开始的其他选项的链接中，所以你只需要指定一次。
</code></pre></div><p>配置文件 <code>.vuepress/config.js</code></p> <h3 id="搜索"><a href="#搜索" class="header-anchor">#</a> 搜索</h3> <blockquote><p>默认只搜索标题，不搜索内置的内容</p></blockquote> <p>如果要提高搜索，可以在文档的开头加入<code>tag</code>，提高搜索的命中率。</p> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">---</span>
<span class="token key atrule">tags</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> html
  <span class="token punctuation">-</span> 介绍
  <span class="token punctuation">-</span> 第一篇文章
<span class="token punctuation">---</span>

</code></pre></div><h2 id="参考"><a href="#参考" class="header-anchor">#</a> 参考</h2> <p>更多请参考:</p> <ul><li><a href="https://vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">vuepress<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://antdocs.seeyoz.cn/" target="_blank" rel="noopener noreferrer">antdocs<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main> <!----></div><div class="global-ui"></div></div>
    <script src="/ant-press-docs/assets/js/app.ea788945.js" defer></script><script src="/ant-press-docs/assets/js/2.6c336191.js" defer></script><script src="/ant-press-docs/assets/js/4.2630cfbc.js" defer></script>
  </body>
</html>